<template>
	<view class="order-list">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title">查询工单</text>
		</view>

		<!-- 筛选卡片 -->
		<view class="filter-card">
			<view class="filter-item">
				<text class="form-label">工单状态</text>
				<picker mode="selector" :range="statusOptions[0]" @change="onStatusChange">
					<view class="picker">{{ selectedStatusText || '请选择状态' }}</view>
				</picker>
			</view>

			<view class="filter-item">
				<text class="form-label">工单类型</text>
				<picker mode="selector" :range="typeOptions" @change="onTypeChange">
					<view class="picker">{{ selectedTypeText || '请选择类型' }}</view>
				</picker>
			</view>

			<view class="filter-item">
				<text class="form-label">创建时间</text>
				<picker mode="date" @change="onDateChange">
					<view class="picker">{{ formData.createTime || '请选择创建时间' }}</view>
				</picker>
			</view>

			<view class="filter-inline">
				<view class="inline-item">
					<text class="label">起始页</text>
					<input type="number" v-model="formData.page" placeholder="起始页" />
				</view>
				<view class="inline-item">
					<text class="label">页大小</text>
					<input type="number" v-model="formData.pageSize" placeholder="页大小" />
				</view>
			</view>
		</view>

		<!-- 查询按钮 -->
		<button class="primary-button" @click="loadOrders">查询</button>

		<!-- 工单表格 -->
		<view v-if="orders.length > 0" class="order-table">
			<view class="order-row" v-for="order in orders" :key="order.id">
				<view class="order-info">
					<view class="order-title">{{ order.title }}</view>
					<view class="order-meta">
						<text class="status-tag" :class="getStatusClass(getStatusText(order.status))">
							{{ getStatusText(order.status) }}
						</text>
						<text class="update-time">{{ order.updateTime }}</text>
					</view>
				</view>
				<button class="detail-button" @click="viewOrderDetail(order.id)">查看详情</button>
			</view>
		</view>

		<!-- 空状态提示 -->
		<view v-else-if="orders.length === 0 && loaded" class="empty-state">
			<image src="/static/empty.png" mode="widthFix" class="empty-image"></image>
			<text class="empty-text">暂无符合条件的工单</text>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				loaded: false, // 用于标记是否已经加载过数据
				statusMap: { // 状态码与文本的映射关系
					1: '待审批',
					2: '已审批',
					3: '已驳回',
					4: '操作中',
					5: '已完成',
					6: '已撤销'
				},
				orders: [], // 订单列表
				token: null, // 登录成功后获取的 Token
				formData: {
					title: '', // 工单对应的流程类型的名称
					createTime: '', // 创建时间
					page: 1, // 起始页
					pageSize: 20, // 页大小
					statusList: [] // 工单对应的状态列表，初始化为空数组
				},
				statusOptions: [
					['待审批', '已审批', '已驳回', '操作中', '已完成', '已撤销']
				],
				selectedStatusText: "", // 用于显示选中的状态文本
				typeOptions: [], // 用于存储从接口获取的类型列表
				selectedTypeText: "" // 用于显示选中的类型文本
			};
		},
		methods: {
			getStatusText(statusCode) {
				return this.statusMap[statusCode] || '未知状态';
			},
			onStatusChange(e) {
				const selectedIndex = e.detail.value;
				const selectedLabel = this.statusOptions[0][selectedIndex];

				this.selectedStatusText = selectedLabel;

				// 发送给后端的状态码，默认从 1 开始（+1）
				this.formData.statusList = [selectedIndex + 1];
			},
			onDateChange(e) {
				const selectedDate = e.detail.value; // 用户选择的日期，格式为 "YYYY-MM-DD"
				const fullDateTime = `${selectedDate} 00:00`; // 将时间设置为 00:00，中间用空格隔开，没有 T
				this.formData.createTime = fullDateTime;
			},
			getStatusClass(statusText) {
				switch (statusText) {
					case '待审批':
						return 'status-waiting';
					case '已审批':
						return 'status-approved';
					case '已驳回':
						return 'status-rejected';
					case '操作中':
						return 'status-operating';
					case '已完成':
						return 'status-finished';
					case '已撤销':
						return 'status-canceled';
					default:
						return '';
				}
			},
			async loadOrders() {
				try {
					this.token = uni.getStorageSync('token');

					if (this.formData.statusList.length === 0) {
						this.formData.statusList = [0]; // 如果没有选择状态，则默认为0
					}

					const res = await uni.request({
						url: "http://localhost:8082/api/applicant/orderList", // 后端接口地址
						header: {
							'Authorization': 'Bearer ' + this.token, // 使用 Token
							'Content-Type': 'application/json'
						},
						method: 'PUT',
						data: { // 直接发送对象
							page: this.formData.page,
							pageSize: this.formData.pageSize,
							title: this.formData.title,
							statusList: this.formData.statusList, // 使用 statusList 数组
							createTime: this.formData.createTime
						}
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.orders = res.data.data.records;
						this.loaded = true; // 标记数据已加载
					} else {
						console.log(res.data);
						uni.showToast({
							title: '加载工单列表失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			async fetchTypeList() {
				try {
					this.token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/applicant/TypeList", // 获取类型列表的接口地址
						header: {
							'Authorization': 'Bearer ' + this.token, // 使用 Token
							'Content-Type': 'application/json'
						},
						method: 'GET'
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.typeOptions = res.data.data.map(item => item
							.typeName);
					} else {
						uni.showToast({
							title: '加载类型列表失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			onTypeChange(e) {
				const selectedIndex = e.detail.value;
				this.selectedTypeText = this.typeOptions[selectedIndex]; // 更新选中的类型文本
				this.formData.title = this.typeOptions[selectedIndex];
			},
			viewOrderDetail(orderId) {
				uni.navigateTo({
					url: `/pages/user/orderDetail/orderDetail?orderId=${orderId}`
				});
			},
			showNoDataToast() {
				uni.showToast({
					title: '暂无符合条件的工单',
					icon: 'none',
					duration: 2000 // 设置提示显示时长为2秒
				});
			}
		},
		mounted() {
			this.fetchTypeList(); // 页面加载时获取类型列表
		},
		watch: {
			orders: {
				handler(newVal) {
					if (newVal.length === 0 && this.loaded) {
						this.showNoDataToast();
					}
				},
				immediate: true // 立即执行一次
			}
		}
	};
</script>

<style scoped>
	.order-list {
		padding: 20rpx;
		background-color: #f0f4f8;
	}

	/* 顶部标题 */
	.header {
		background: linear-gradient(to right, #3b82f6, #2563eb);
		color: white;
		padding: 20rpx;
		text-align: center;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	/* 筛选卡片 */
	.filter-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 24rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.filter-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.label {
		font-size: 28rpx;
		color: #64748b;
		width: 200rpx;
	}

	.form-label {
		font-weight: 500;
		font-size: 14px;
		color: #333;
		display: flex;
		align-items: center;
	}

	.form-label::before {
		content: '';
		display: inline-block;
		width: 4px;
		height: 16px;
		background-color: #1976d2;
		border-radius: 2px;
		margin-right: 8px;
	}

	.picker {
		flex: 1;
		padding: 12rpx 20rpx;
		border: 1px solid #cbd5e1;
		border-radius: 12rpx;
		background-color: #f9fafb;
		font-size: 28rpx;
	}

	/* 起始页 & 页大小并排 */
	.filter-inline {
		display: flex;
		gap: 20rpx;
	}

	.inline-item {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	/* 查询按钮 */
	.primary-button {
		width: 100%;
		padding: 20rpx;
		background: linear-gradient(to right, #3b82f6, #2563eb);
		color: white;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
	}

	/* 订单表格 */
	.order-table {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.order-row {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-info {
		flex: 1;
	}

	.order-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #0f172a;
		margin-bottom: 12rpx;
	}

	.order-meta {
		display: flex;
		align-items: center;
		gap: 20rpx;
		font-size: 26rpx;
		color: #64748b;
	}

	.status-tag {
		padding: 6rpx 16rpx;
		border-radius: 12rpx;
		color: white;
		font-weight: 500;
		font-size: 24rpx;
	}

	.update-time {
		font-size: 24rpx;
	}

	/* 状态色 */
	.status-waiting {
		background: #facc15;
	}

	.status-approved {
		background: #22c55e;
	}

	.status-rejected {
		background: #ef4444;
	}

	.status-operating {
		background: #3b82f6;
	}

	.status-finished {
		background: #10b981;
	}

	.status-canceled {
		background: #9ca3af;
	}

	/* 详情按钮 */
	.detail-button {
		padding: 10rpx 20rpx;
		background: #3b82f6;
		color: white;
		border-radius: 12rpx;
		font-size: 26rpx;
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		margin-top: 80rpx;
	}

	.empty-image {
		width: 300rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #94a3b8;
	}
</style>